<template>
	<div>
		<div class="main">
			<div class="button">
				<button>button</button>
				<button>button</button>
			</div>
			<div class="stars">
				<div v-for="(item, index) in list_star" :key="index" class="star" ref="star"></div>
			</div>
			<section class="slider">
				<div class="about-me">
					<div class="info">
						<img src="../static/images/anthony.jpg" alt="" />
						<p>董仙女嘚王先生</p>
					</div>
				</div>
				<div class="love">
					<div>
						<img src="../static/images/wang.jpg" alt="" />
						<span>❤</span>
						<img src="../static/images/dong.jpg" alt="" />
					</div>
					<p>
						{{ loveDate }}
					</p>
				</div>
			</section>
		</div>
	</div>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			list_star: 800, //星星数量
			distance: 800, //间距
			loveDate: '',
			timer: null,
		};
	},
	created() {},
	mounted() {
		this.timer = setInterval(() => {
			this.formattingDate();
			console.log(1);
		}, 1000);

		let starArr = this.$refs.star;
		starArr.forEach(item => {
			let speed = 0.2 + Math.random() * 1.5;
			let thisDistance = this.distance + Math.random() * 300;
			item.style.transformOrigin = `0 0 ${thisDistance}px`;
			item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${Math.random() * 360}deg) rotateX(${
				Math.random() * -50
			}deg) scale(${speed},${speed})`;
		});
	},
	methods: {
		formattingDate() {
			let nowDate = new Date();
			let oldDate = new Date('2019/04/09');

			let msDate = nowDate.getTime() - oldDate.getTime(); //时间差的毫秒数
			//计算出相差天数
			let days = Math.floor(msDate / (24 * 3600 * 1000));
			//计算出小时数
			let leave1 = msDate % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
			let hours = Math.floor(leave1 / (3600 * 1000));

			//计算相差分钟数
			let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
			let minutes = Math.floor(leave2 / (60 * 1000));
			//计算相差秒数
			let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			let seconds = Math.round(leave3 / 1000);

			this.loveDate =
				this.formtDate(days) + '天' + this.formtDate(hours) + '小时 ' + this.formtDate(minutes) + ' 分钟 ' + this.formtDate(seconds) + ' 秒';
		},
		formtDate(val) {
			if (val < 10) {
				return '0' + val;
			} else {
				return val;
			}
		},
	},
	beforeDestroy() {
		clearInterval(this.timer);
		this.timer = null;
	},
};
</script>

<style scoped lang="scss">
@keyframes rotate {
	0% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
	}
	100% {
		transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
	}
}
@keyframes glow {
	0% {
		background-position: 0%;
	}
	100% {
		background-position: 400%;
	}
}
@keyframes xintiao {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}
.main {
	overflow: hidden;
	position: relative;
	display: grid;
	place-items: center;
	height: calc(100vh - 60px);
	width: 100%;
	background-attachment: fixed;
	background: url('../static/images/about-bg.jpeg') no-repeat;
	background-size: cover;
	.stars {
		transform: perspective(500px);
		transform-style: preserve-3d;
		position: absolute;
		perspective-origin: 50% 100%;
		left: 50%;
		bottom: 0;
		animation: rotate 90s infinite linear;
		.star {
			width: 2px;
			height: 2px;
			background: #f7f7b8;
			top: 0;
			left: 0;
			backface-visibility: hidden;
		}
	}
	.slider {
		position: absolute;
		right: 0;
		top: 0;
		width: 266px;
		padding-right: 20px;
		height: 100%;
		.about-me {
			margin-top: 120px;
			height: 310px;
			padding: 1rem 1.2rem;
			border-radius: 8px;
			background-color: rgba(222, 222, 222, 0.3);
			.info {
				text-align: center;
				img {
					width: 80px;
					height: 80px;
					border-radius: 50%;
				}
				p {
					margin-top: 10px;
					color: #fff;
					font-weight: 600;
				}
			}
		}
		.love {
			height: 119px;
			margin-top: 20px;
			padding: 1rem 0.8rem;
			background-color: rgba(222, 222, 222, 0.3);
			text-align: center;
			border-radius: 8px;
			box-sizing: border-box;
			div {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
				img {
					width: 50px;
					height: 50px;
					margin: 0 20px;
					box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
					border-radius: 50%;
				}
				span {
					font-size: 16px;
					color: red;
					animation: xintiao 1.33s ease-in-out infinite;
				}
			}
			p {
				margin-top: 10px;
				color: #fff;
				font-weight: 600;
			}
		}
	}
}
button {
	position: relative;
	height: 60px;
	width: 200px;
	margin: 0 35px;
	border-radius: 50px;
	border: none;
	outline: none;
	background: linear-gradient(
		180deg,
		rgba(53, 223, 244, 0) -20.54%,
		rgba(53, 223, 244, 0.6) 9.23%,
		rgba(38, 182, 246, 0.6) 43.94%,
		rgba(15, 115, 250, 0.6) 100.96%,
		rgba(15, 115, 250, 0) 158.04%
	);
	color: #fff;
	font-size: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	cursor: pointer;
}
button:first-child:hover {
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
}
button:last-child:hover {
	background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
	background-size: 400%;
}
button::before {
	content: '';
	position: absolute;
	/*背景颜色继承*/
	background: inherit;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border-radius: 50px;
	/*滤镜效果。*/
	filter: blur(10px);
	opacity: 0;
	transition: opacity 0.5s;
}
button:hover::before {
	opacity: 1;
	z-index: -1;
}
button:hover {
	z-index: 1;
	animation: glow 8s linear infinite;
}
</style>
